/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/no-unused-state */
/* eslint-disable no-shadow */
/* eslint-disable react/no-did-update-set-state */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Form } from 'antd';
import moment from 'moment/moment';
import StatisticalData from './StatisticalData';
import DetailedData from './DetailedData';

@connect(({ loading, list, user, setting }) => ({
  list,
  userInfo: user.currentUser.user_info,
  ...setting,
  stationing: loading.effects['area/subList'],
  operatoring: loading.effects['list/getBrandsList'],
  storageSum: loading.effects['list/storageSum'],
}))
@Form.create()
export default class Forthe extends Component {
  state = {
    points: false,
    dataPoints: null,
    canvesList: '',
    piesList: null,
    between: '',
    chartType: '',
    title: '出入库分日数据',
    titlePieLeft: '入库品牌统计',
    titlePieRight: '出库品牌统计',
    listType: 'storageSum',
    startDate: moment()
      .startOf('day')
      .subtract(7, 'days'),
    endDate: moment()
      .endOf('day')
      .subtract(1, 'days'),
  };

  componentDidMount = () => {
    this.getList();
  };

  componentDidUpdate(prevProps) {
    const { points } = this.state;
    if (prevProps.area_id !== this.props.area_id && points) {
      this.setState(
        {
          points: false,
        },
        () => {
          this.getList();
        },
      );
    }
  }

  onClickTime = data => {
    const {
      dispatch,
      area_id,
      options: { key },
    } = this.props;
    const reqZoneId = key === 'yz' ? area_id : null;
    this.setState({
      points: true,
      dataPoints: data,
      between: '1',
      chartType: '2',
      title: '出入库分日数据',
    });
    dispatch({
      type: 'list/storageList',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        area_id: reqZoneId,
      },
    });
    dispatch({
      type: 'list/storageSummary',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        brand: data.brand,
        area_id: reqZoneId,
      },
      then: data => {
        if (data) {
          this.setState({
            canvesList: data,
          });
        } else {
          this.setState({
            canvesList: null,
          });
        }
      },
    });
  };

  onClickBrand = data => {
    const {
      dispatch,
      area_id,
      options: { key },
    } = this.props;
    const reqZoneId = key === 'yz' ? area_id : null;
    this.setState({
      points: true,
      dataPoints: data,
      between: '2',
      chartType: '1',
      title: '出入库分品牌数据',
    });
    dispatch({
      type: 'list/storageList',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        brand: data.brand,
        type: 'brand',
        area_id: reqZoneId,
      },
    });
    dispatch({
      type: 'list/storagePic',
      payload: {
        cm_id: data.inn_id,
        start: data.start,
        end: data.end,
        area_id: reqZoneId,
      },
    });
  };

  getList = () => {
    const {
      dispatch,
      userInfo,
      options: { key },
      area_id,
    } = this.props;
    const { listType, startDate, endDate } = this.state;
    const { branch = [], branchLevel } = userInfo;
    const isZyAccount = key == 'post';
    const reqZoneId = key === 'yz' ? area_id : null;
    let ini_branchId;
    let init_branch;
    if (branchLevel == 0 && branch.length == 0 && isZyAccount) {
      init_branch = [
        {
          id: '0',
          name: '中国邮政集团有限公司',
          level: '0',
          pid: '-2', // 自定义pid用来区分是否是单独属于总公司账号
        },
      ];
      ini_branchId = ['0'];
    } else {
      ini_branchId = branch.filter(val => (isZyAccount ? val.level != 0 : val)).map(i => i.id);
      init_branch = branch;
    }
    // 中邮默认不请求
    !isZyAccount &&
      dispatch({
        type: 'list/storageSum',
        payload: {
          brand: 'all',
          area_id: reqZoneId,
        },
      });
    dispatch({
      type: 'list/setFormValues',
      payload: {
        [`${listType}Date`]: [startDate, endDate],
        [`${listType}SiteId`]: 'all',
        [`${listType}AddressId`]: ini_branchId,
        [`${listType}BrandId`]: 'all',
        listType,
        init_branch,
        area_id: reqZoneId,
      },
    });
  };

  cancel = mode => {
    this.setState({
      points: mode,
    });
  };

  render() {
    const {
      points,
      dataPoints,
      between,
      chartType,
      title,
      titlePieLeft,
      titlePieRight,
      piesList,
      listType,
    } = this.state;

    const piesLists = piesList || [];
    const { stationing, stationList, operatoring, list, storageSum, area_id } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 0 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const { canvesList, inout_detail, inout, inout_brand, brandList } = list;
    const canvesLists = canvesList || [];
    const { pagination } = inout;
    const { summary } = pagination || {};
    const { summary_detail } = inout_detail.pagination || {};
    const { summary_brand } = inout_brand.pagination || {};
    const { in_num_sum, out_num_sum, back_num_sum } = summary || {};
    const { in_sum, out_sum, back_sum } = summary_detail || {};
    const { brand_in_sum, brand_out_sum, brand_back_sum } = summary_brand || {};
    const columns = [
      {
        title: '日期',
        dataIndex: 'start',
        render: (current, currentData) => (
          <a onClick={() => this.onClickTime(currentData)}>
            {currentData.start}到{currentData.end}
          </a>
        ),
      },
      {
        title: '驿站名称',
        dataIndex: 'inn_name',
      },
      {
        title: '品牌',
        dataIndex: 'brand_zh',
        render: (current, currentData) => {
          if (currentData.brand == 'all') {
            return <a onClick={() => this.onClickBrand(currentData)}>{currentData.brand_zh}</a>;
          }
          return <span>{currentData.brand_zh}</span>;
        },
      },
      {
        title: `入库数 ${in_num_sum || 0} 条`,
        dataIndex: 'in_num',
        render: num => num || 0,
      },
      {
        title: `出库数 ${out_num_sum || 0} 条`,
        dataIndex: 'out_num',
        render: num => num || 0,
      },
      {
        title: `退回数 ${back_num_sum || 0} 条`,
        dataIndex: 'back_num',
        render: num => num || 0,
      },
    ];
    const column = [
      {
        title: '日期',
        dataIndex: 'origin_created_time',
      },
      {
        title: '驿站名称',
        dataIndex: 'inn_name',
      },
      {
        title: '品牌',
        dataIndex: 'brand_zh',
      },
      {
        title: `入库数 ${in_sum || 0} 条`,
        dataIndex: 'in_num',
        render: num => num || 0,
      },
      {
        title: `出库数 ${out_sum || 0} 条`,
        dataIndex: 'out_num',
        render: num => num || 0,
      },
      {
        title: `退回数 ${back_sum || 0} 条`,
        dataIndex: 'back_num',
        render: num => num || 0,
      },
    ];
    const columnBrand = [
      {
        title: '日期',
        dataIndex: 'origin_created_time',
      },
      {
        title: '驿站名称',
        dataIndex: 'inn_name',
      },
      {
        title: '品牌',
        dataIndex: 'brand_zh',
      },
      {
        title: `入库数 ${brand_in_sum || 0} 条`,
        dataIndex: 'in_num',
        render: num => num || 0,
      },
      {
        title: `出库数 ${brand_out_sum || 0} 条`,
        dataIndex: 'out_num',
        render: num => num || 0,
      },
      {
        title: `退回数 ${brand_back_sum || 0} 条`,
        dataIndex: 'back_num',
        render: num => num || 0,
      },
    ];
    return (
      <div>
        {points ? (
          <DetailedData
            title={title}
            loading={storageSum}
            data={chartType == 1 ? inout_brand : inout_detail}
            canvesList={canvesLists}
            piesList={piesLists}
            columns={chartType == 1 ? columnBrand : column}
            dataPoints={dataPoints}
            cancel={mode => this.cancel(mode)}
            between={between}
            chartType={chartType}
            operatoring={operatoring}
            dropList={brandList}
            titlePieLeft={titlePieLeft}
            titlePieRight={titlePieRight}
            dvs="1"
            listType="storageList"
          />
        ) : (
          <StatisticalData
            formItemLayout={formItemLayout}
            stationing={stationing}
            stationList={stationList}
            operatoring={operatoring}
            dropList={brandList}
            loading={storageSum}
            data={inout}
            canvesList={canvesLists}
            columns={columns}
            listType={listType}
            down="storage"
            area_id={area_id}
          />
        )}
      </div>
    );
  }
}
